<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="UTF-8">
    <title>发表</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/chat.css"/>
    <link rel="stylesheet" href="../css/publish_activity.css"/>
    <style>
        header>h3{
            text-align: center;
            line-height: 0.3rem;
        }
        .z_file{
            margin-bottom: 0.2rem;
        }
        .publish{
            position: relative;
            margin-top: 0.3rem;
            width: 90%;
            color:#fff;
            background-color: #5f321a;
            text-align: center;
            font-size: 0.32rem;
            left: 5%;
            line-height: 1rem;
            height: 1rem;
        }
        #loading{
            display: none;
            position: fixed;
            top: 30%;
            left: 50%;
            z-index: 122222222222;
            transform: translate(-50%,-50%);
        }
        #loading img{
            width: 1rem;
            vertical-align:middle;
        }
        #loading div{
            margin-top: 0.2rem;
            margin-left: -0.15rem;
        }
    </style>
</head>
<body>
<div id="loading">
    <img src="../img/login.gif" alt=""/>
    <div>发送中，请等待...</div>
</div>
<div class="publish_layer" style="overflow-x: hidden">
    <header class="publish_header">
        <i class="f_left" onclick="location.href='./my_market_order.html'" ></i>
        <h3 >发表评价</h3>

    </header>
    <div class="say">
        <textarea name="" id="" cols="50" rows="10" placeholder="请输入评价内容..."></textarea>
    </div>
    <div class="imageBox">
        <!--<a href="javascript:;" class="image">
              <img src="../img/publish_common.png" alt="" class="userImg"/>
              <span class="add_pic">点击添加图片</span>
          </a>-->
        <!--<a href="javascript:;">
          <img src="../img/publish_common.png" alt="" class="userImg"/>
          <span class="add_pic">点击添加图片</span>
      </a>
          <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" multiple>-->
        <div class="z_photo">
            <div class="z_file">
                <!--   <img src="../img/publish_common.png" alt="" class="userImg"/>-->
                <!--<span class="add_pic">点击添加图片</span>-->
                <input type="file" capture="camera" name="file" id="file" value=""  accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
            </div>
        </div>
        <button class="publish">提交</button>

        <div class="z_mask">

            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
    </div>
</div>

<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script>
    //图片上传
    var obj={};
    var goodsOrderId=location.href.split("=")[1];
    $(".publish").click(function(){
        //转换成功 图片的base64地址 很重要
        // console.log(images);
        //获取用户输入的全部内容之后 包括图片的地址  发送给后台 在进行页面的跳转
        var content=$("textarea").val() ;
        if(content!==""||images.length !==0){
            obj.body=content;
            obj.goodsOrderId=goodsOrderId;
            obj.picture= JSON.stringify(images);
            console.log(obj);
            $.ajax({
                //处理session每次不唯一问题
                xhrFields: {
                    withCredentials: true
                },
                //请求方式
                type:'post',
                url:baseUrl+'/goods/updateGoodsOrderStatus3To4',
                dataType:'json',
                data:obj,
                beforeSend:function(data){
                    $("#loading").show();
                },
                success:function(data){
                    console.log(data);
                    if(data.code=="success"){
                        alert("发表成功");
                        location.href='./my_market_order.html'
                    }
                },
                error:function(data){
                    console.log(data);
                }
            })
        }
        else{
            alert("记得填写内容喔");
        }

    })


    /*上传图片
     * */
    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];

        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];

        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            //判断上传的图片大小
            if(file.files && file.files[i]){
                var fileData = file.files[i];
                var size = fileData.size;   //注意，这里读到的是字节数
                var isAllow = false;
                if(!size) isAllow = false;
                var maxSize = 2048;
                maxSize = maxSize * 1024;   //转化为字节
                isAllow = size <= maxSize;
                if(!isAllow){
                    alert("大小超过2 M，请重新上传");
                    return false;
                }
            }

            //结束

            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
            //getBase64Image(img,imgArr[i]);
        };
        //'console.log(imgArr);这个是图片的本地地址
        for(let i=0;i<imgArr.length;i++){
            (function(image, x, y,index){
                drawing(image, x, y,index)
            })(imgArr[i],0,0,i)
        }
        imgRemove();
    };
    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        };
    };
    var container=document.querySelector(".z_photo");
    var images=[];
    function drawing(image, x, y,index) {
        var img = new Image();
        img.crossOrigin = 'anonymous';
        img.src = image;
        img.onload = function () {
            let id='canvas'+index;
            createCanvas(id,img.width,img.height);
            var cs = document.getElementById(id);
            var ctx = cs.getContext("2d");
            ctx.drawImage(img, x, y);
            var imageUrl=cs.toDataURL('', 1);
            images.push(imageUrl);
            //转换成功
            // console.log(images);
            removeDom(id);
        } ;
    }

    function createCanvas(id,width,height){
        var canvas=document.createElement("canvas");
        canvas.setAttribute('id',id);
        canvas.setAttribute('width',width);
        canvas.setAttribute('height',height);
        canvas.style.display="none";
        container.appendChild(canvas);
    }
    function removeDom(id){
        document.getElementById(id).outerHTML='';
    }
    $(".location").click(function(){
        $(".location_alert").css("display","block");
        $(".publish_layer").css("display","none");
        $(".back_pub").click(function(){
            $(".location_alert").css("display","none");
            $(".publish_layer").css("display","block");
            //获取位置
            var location_info=localStorage.getItem("location");
            if(location_info){
                $(".location_info").text(location_info.substr(3,location_info.length));
                //显示之后 清除  还有reamrk别名
                console.log(location_info);
            }else{
                $(".location_info").text("位置")
            }
        })
    })

</script>

</body>
</html>
